<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="content">
				<view class="custom-title">微废处理打卡</view>
			</block>
		</cu-custom>
		<view>
			<view class="show-buka" v-if="join_time != ''">申请补卡日期：{{join_time}}</view>
			<preview-form ref="preview" :dataList="list" v-if="list.length > 0"
				:default_user_index="default_user_index"></preview-form>
			<view class="button" @tap="submit" v-if="showSubmit == true">立即参加</view>
			<view class="zhanwei"></view>
		</view>
		<!-- <view class="clock-content">
			<view class="clock-list-content" :style="[{backgroundImage:'url(https://txr001.zthj.net/static/img/dkInputBg.png)'}]">
				<view class="title">微废处理打卡</view>
				<view class="margin-top-48 text-black text-df">微废处理量（吨）：</view>
				<input class="clock-input" placeholder="请输入数量" name="input"></input>
				<view class="flex align-center justify-between padding-top-xl">
					<view class="">
						<image src="https://txr001.zthj.net/static/img/time.png" class="img-32 text-img-center"></image>
						<text class="padding-left-16 content text-sm">时间</text>
					</view>
					<view>
						<image src="https://txr001.zthj.net/static/img/right.png" class="img-28"></image>
					</view>
				</view>
				<view class="input-time">
					5月27日  12:30:22
				</view>
				<view class="flex align-center justify-between padding-top-xl">
					<view class="">
						<image src="https://txr001.zthj.net/static/img/address.png" class="img-32 text-img-center"></image>
						<text class="padding-left-16 content text-sm">地点</text>
					</view>
					<view>
						<image src="https://txr001.zthj.net/static/img/right.png" class="img-28"></image>
					</view>
				</view>
				<view class="input-time">
					某某某3厂
				</view>
				<view class="margin-top-64">
					<view class="upload-content">
						<text class="upload-text">+</text>
					</view>
				</view>
				<view class="btn-content">
					<button class="cu-btn clock-btn">打卡</button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import previewForm from "./../../components/diy-form/preview-form.vue";
	export default {
		components: {
			previewForm,
		},
		data() {
			return {
				showSubmit: false,
				s_id: '',
				join_time: '',
				list: [],
				detailInfo: {},
				default_user_index: -1,
			}
		},
		onLoad(params) {
			//params.s_id = 9;
			// this.s_id = 3;
			// this.getInfo();
			if (params.default_user_index) {
				this.default_user_index = params.default_user_index;
			}
			if (params.join_time) {
				this.join_time = params.join_time;
			}
			if (params.s_id) {
				this.s_id = params.s_id;
				this.getInfo();
			}
		},
		methods: {
			async submit() {
				var that = this;
				// var checkLogin = that.checkLogin(true);
				// if (checkLogin == false) {
				// 	that.navigateTo('/pages/login/selLogin');
				// 	return;
				// }
				//this.$refs.preview.uploadFile(); //检测上传文件
				that.showModal2('确认参加', '', async function(res) {
					if (res == 'yes') {
						if (that.detailInfo.join_datalist != '') {
							var resData = await that.$refs.preview.getFormData(); //获取最终数据方法
				
							// console.log('join resData',resData);
							if (!resData || resData.length < 1) {
								return false;
							}
						} else {
							var resData = '';
						}
						// 数组转换为字符串的一种方法是在其后连接一个空字符串
						// var need_check_text = resData + "";
						// if (need_check_text) {
						// 	var res = await that.checkQiniuText(need_check_text);
						// 	console.log("校验结果" + JSON.stringify(res))
						// 	if (!res.status) {
						// 		return;
						// 	}
						// }

						that.loadingMsg('正在提交数据');
						let result = await that.$api.joinStatistics({
							resData,
							s_id: that.s_id,
							join_time: that.join_time
						});
						
						that.msg(result.msg)
						if (result.code == 1) {
							// that.showSubmit = false;
							setTimeout(function() {
								// that.navbackTo();
								that.goPage('/pages/clock/clockCalendar');
							}, 2000)
						}
					}
				})
				//var check = this.$refs.preview.checkFormData();  //检测填写数据是否完善
				//console.log(resData)
			},
			async getInfo() {
				var that = this;
				if (that.s_id > 0) {
					let res = await that.$api.getStatisticsDetailInfo({
						s_id: that.s_id,
						join_time: that.join_time
					});
					if (res.code == 1) {
						var detailInfo = res.data.info;
						that.detailInfo = detailInfo;
						if (detailInfo.join_datalist) {
							that.list = JSON.parse(detailInfo.join_datalist)
						}
						if (detailInfo.last_content) {
							setTimeout(function() {
								var contentArr = JSON.parse(detailInfo.last_content);
								that.$refs.preview.saveInitResultData(contentArr)
							}, 100)
						}
						that.showSubmit = true;
					} else {
						that.msg(res.msg);
					}

				}
			},

		}
	}
</script>
<style scoped lang="scss">
	.clock-content {
		margin: 48rpx 32rpx;

		.clock-list-content {
			background-size: 100% 100%;
			width: 100%;
			height: 1150rpx;
			margin-bottom: 32rpx;
			padding: 48rpx 32rpx 54rpx;

			.title {
				font-size: 40rpx;
				font-weight: 500;
				color: #000000;
			}

			.clock-input {
				font-size: 28rpx;
				min-height: 88rpx;
				color: black;
				border-bottom: 2rpx solid #D9D9D9;
			}

			.input-time {
				padding: 24rpx 0;
				border-bottom: 2rpx solid #D9D9D9;
				font-size: 28rpx;
				font-weight: 400;
				color: #000000;
			}

			.upload-content {
				width: 240rpx;
				height: 240rpx;
				// line-height: 240rpx;
				background: #FCFCFD;
				border-radius: 48rpx;
				border: 2rpx solid #000000;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.upload-text {
				font-size: 200rpx;
				color: #D9D9D9;
			}

			.btn-content {
				margin: 86rpx 50rpx 0;
			}

			.clock-btn {
				height: 72rpx;
				line-height: 72rpx;
				background: #24458E;
				box-shadow: 0px 6rpx 16rpx 0px rgba(0, 0, 0, 0.2);
				border-radius: 48rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				width: 100%;
			}
		}

	}

	.show-buka {
		padding: 20rpx 0 0 20rpx;
		color: #999999;
		font-size: 26rpx;
	}

	.show-name {
		background: #FFFFFF;
		width: 94%;
		margin: 20rpx 3%;
		border-radius: 20rpx;
		line-height: 40px;
		height: 80rpx;
		overflow: hidden;
		text-align: center;
		color: #999999;
	}

	.button {
		height: 80rpx;
		width: 90%;
		margin: 50rpx auto;
		background-color: $uni-color-primary;
		color: #ffffff;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 2rpx;
		border-radius: 30rpx;
	}

	.show-kl {
		.kouling {
			width: 100%;
			height: 100rpx;
			background: #ffffff;
			margin: 20rpx 0;

			.input {
				width: 100%;
				padding-left: 40rpx;
				height: 100rpx;
			}
		}
	}
</style>